模态展示
Scripting App 提供了对 SwiftUI 风格的模态视图展示的支持。开发者可以通过向组件声明特定的属性,实现类似 sheet
、popover
、fullScreenCover
、alert
和 confirmationDialog
的展示行为。这些展示是响应状态变化的,并支持多种配置项,以满足在不同屏幕尺寸和交互需求下的使用场景。
Alert(警告弹窗)
当条件为真时,展示一个带标题、可选消息和操作按钮的警告弹窗。
1alert?: {
2 title: string
3 isPresented: boolean
4 onChanged: (isPresented: boolean) => void
5 actions: VirtualNode
6 message?: VirtualNode
7}
字段说明
title
:弹窗的标题文本。
isPresented
:控制弹窗是否显示的布尔值。
onChanged
:当 isPresented
状态变化时调用的回调函数。需要在用户关闭弹窗时将其更新为 false
。
actions
:表示操作按钮的 VirtualNode
。
message
(可选):用于展示附加信息的 VirtualNode
。
Confirmation Dialog(确认对话框)
展示一个确认对话框,包含标题、可选消息和操作项。
1confirmationDialog?: {
2 title: string
3 titleVisibility?: Visibility
4 isPresented: boolean
5 onChanged: (isPresented: boolean) => void
6 actions: VirtualNode
7 message?: VirtualNode
8}
字段说明
title
:对话框的标题。
titleVisibility
(可选):标题是否显示,默认值为 "automatic"
。
isPresented
:是否显示对话框。
onChanged
:用于更新 isPresented
状态的回调。
actions
:对话框操作项。
message
(可选):附加消息内容。
1type Visibility = "automatic" | "hidden" | "visible"
Sheet(底部弹窗)
从底部弹出模态视图,通常用于展示中等重要性的内容。支持传入单个或多个配置项。
1sheet?: ModalPresentation | ModalPresentation[]
Full Screen Cover(全屏覆盖视图)
展示一个覆盖全屏的模态视图。可传入多个视图配置。
1fullScreenCover?: ModalPresentation | ModalPresentation[]
Popover(弹出菜单)
展示一个带箭头的弹出内容区域,通常用于 iPad 或大屏设备上。可设置适配策略及箭头位置。
1popover?: PopoverPresentation | PopoverPresentation[]
PopoverPresentation 类型定义
1type PopoverPresentation = ModalPresentation & {
2 arrowEdge?: Edge
3 presentationCompactAdaptation?: PresentationAdaptation | {
4 horizontal: PresentationAdaptation
5 vertical: PresentationAdaptation
6 }
7}
字段说明
arrowEdge
(可选):弹出箭头指向的边,默认是 "top"
。
presentationCompactAdaptation
(可选):在紧凑环境下的展示适配策略。
1type Edge = "top" | "bottom" | "leading" | "trailing"
ModalPresentation(通用模态视图结构)
该类型被 sheet
、popover
和 fullScreenCover
使用,定义了基础展示结构。
1type ModalPresentation = {
2 isPresented: boolean
3 onChanged: (isPresented: boolean) => void
4 content: VirtualNode
5}
字段说明
isPresented
:控制是否展示模态视图。
onChanged
:模态视图关闭或显示时触发的状态更新回调。
content
:展示内容的 VirtualNode
。
PresentationAdaptation(展示适配策略)
指定在不同尺寸环境下的视图展示方式。
1type PresentationAdaptation =
2 | "automatic"
3 | "fullScreenCover"
4 | "none"
5 | "popover"
6 | "sheet"
automatic
:系统自动选择合适的展示方式。
fullScreenCover
:优先使用全屏覆盖。
popover
:优先使用弹出菜单形式。
sheet
:优先使用底部弹窗。
none
:尽量保持原始展示方式,不做适配。
示例用法
展示 Sheet
1<Button
2 title={"Present"}
3 action={() => setIsPresented(true)}
4 sheet={{
5 isPresented: isPresented,
6 onChanged: setIsPresented,
7 content: <VStack>
8 <Text>Sheet 内容</Text>
9 <Button title={"Dismiss"} action={() => setIsPresented(false)} />
10 </VStack>
11 }}
12/>
展示 Popover
1<Button
2 title={"Show Popover"}
3 action={() => setIsPresented(true)}
4 popover={{
5 isPresented: isPresented,
6 onChanged: setIsPresented,
7 presentationCompactAdaptation: "popover",
8 content: <Text>Popover 内容</Text>,
9 arrowEdge: "top",
10 }}
11/>
展示 Full Screen Cover
1<Button
2 title={"Present"}
3 action={() => setIsPresented(true)}
4 fullScreenCover={{
5 isPresented: isPresented,
6 onChanged: setIsPresented,
7 content: <VStack>
8 <Text>全屏模态视图</Text>
9 </VStack>
10 }}
11/>
配置 Sheet 高度
1sheet={{
2 isPresented: isPresented,
3 onChanged: setIsPresented,
4 content: <VStack
5 presentationDetents={[200, "medium", "large"]}
6 presentationDragIndicator={"visible"}
7 >
8 <Text>可拖动调整高度的 Sheet</Text>
9 </VStack>
10}}
展示 Alert
1<Button
2 title={"Present"}
3 action={() => setIsPresented(true)}
4 alert={{
5 isPresented: isPresented,
6 onChanged: setIsPresented,
7 title: "警告",
8 message: <Text>一切正常</Text>,
9 actions: <Button title={"OK"} action={() => {}} />
10 }}
11/>
展示 Confirmation Dialog
1<Button
2 title={"Present"}
3 action={() => setIsPresented(true)}
4 confirmationDialog={{
5 isPresented,
6 onChanged: setIsPresented,
7 title: "是否删除此图片?",
8 actions: <Button title={"删除"} role={"destructive"} action={() => {}} />
9 }}
10/>